﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page autoFlush="true" buffer="1094kb"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="Shortcut Icon" href="logo.ico"  />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的购物车</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="js/common.js"  type="text/javascript"></script>
<script src="js/jquery-1.12.4.js"  type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
	//统计数量和价格
	countAndPrice();
	
	//获取原来的值
	var sourceValue = 0;
	//js控制input文本框只能输入数字（正整数）
	$(".num_txt").focus(function() {
		//光标移进去的时候，获取原来的值
		sourceValue = $(this).val();
	})
	$(".num_txt").blur(function() {
		var regCode = /^[1-9]{1}[0-9]{0,21}$/;
		//光标移走的时候，将判断输入的数字是否合法
		if(regCode.test($(this).val()) == false) {
			alert("数量只能为数字！");
			//不合法将恢复到原来的值
			$(this).val(sourceValue);
		} else {
			//获取商品单价
			var price = $(this).parent().prev().attr("value");
			//获取商品数量
			var $each=$(this).val();
			//获取商品ID
			var $id=$(this).parent().prev().prev().prev().prev().attr("value");
			//alert($id);
			//价格         =单价*数量
			 $("#s_price"+$id).attr("value",parseFloat(price)*parseFloat($each));
			$("#s_price"+$id).text("￥"+(parseFloat(price)*parseFloat($each))+".0");		
			//统计所有商品的数量和价格
			countAndPrice(); 
			//进行商品跟新操作
			update($id,$each,price);
		}

	})
});
	//商品数量加一
	function jia(salePrice,id) {
		//数量
		$("#num"+id).val(parseInt($("#num"+id).val())+1);
		
		//小计价格
		var p= $("#s_price"+id).attr("value");
		//设置小计价格
		$("#s_price"+id).attr("value",parseFloat(salePrice)+parseFloat(p));
		$("#s_price"+id).text("￥"+(parseFloat(salePrice)+parseFloat(p))+".0");
		//统计数量和价格
		countAndPrice();
		var count= $("#num"+id).val();
		var price=$("#s_price"+id).attr("value");
		//进行商品跟新操作
		update(id,count,price);
	};
	//商品数量减一
	function jian(salePrice,id) {
		var num=$("#num"+id).val();
		if (num==1) {
			alert("亲，不能再减了^.^|^.^");
		}else{
			$("#num"+id).val(parseInt($("#num"+id).val())-1);
			//小计价格
			var p= $("#s_price"+id).attr("value");
			//设置小计价格
			$("#s_price"+id).attr("value",parseFloat(p)-parseFloat(salePrice));
			$("#s_price"+id).text("￥"+(parseFloat(p)-parseFloat(salePrice))+".0");
			//统计数量和价格
			countAndPrice();
			
			var count= $("#num"+id).val();
			var price=$("#s_price"+id).attr("value");
			//进行商品跟新操作
			update(id,count,price);
		}	
	};
	//删除单个商品
	function del(id) {
		var check= $("#c_id"+id).prop('checked');
		if (check) {
			var flag= confirm("确认删除吗？亲^_^");
			if (flag) {
				$.post("../Easy_Easy_City_First_End/shop",
						{"opr":"del","id":id},
					function(data){
						if (data.result=="1") {
							alert("删除成功");
							$("#tr_c"+id).remove();
							//统计选中的商品数量和价格
							countAndPrice();
						} else {
							alert("删除失败");
						}
					},"json");
			}
		}else{
			alert("亲^_^,请选中需要删除的商品哦");
		}
	};
	//删除选中的商品
	function delSelect() {
		var del=false;
		$("input:checkbox[name=checkName]").each(function(index){
			if ($(this).prop('checked')) {
				del=true;
			}
		});
		if (del) {
			var flag=confirm("确定删除吗？");
			var count=0;
			var isDel=0;
			if (flag) {
				$("input:checkbox[name=checkName]:checked").each(function(index){
					//操作
					var id=$(this).parent().prev().val();
					$.post("../Easy_Easy_City_First_End/shop",
							{"opr":"del","id":id},
						function(data){
							if (data.result=="1") {
								$("#tr_c"+id).remove();//.remove();
								++count;					
							} else {
								alert("删除失败");
							}
						},"json");
					isDel=index;
				});
			}
			if (parseInt(count)==parseInt(isDel)) {
				alert("删除成功");
			} 
		}else {
			alert("亲^_^,还没有选中要删除的物品哦！");
		}
		//统计数量和价格
		$("#s_count").text(0);
		$("#s_sum").text(0+".00");
	};
	//全选和反选
	function selectAll() {
		if ($("#selectAll").prop('checked')) {
			 $("input:checkbox[name=checkName]").each(function(index){
				$(this).prop('checked',true);
			}); 
		} else {
			$("input:checkbox[name=checkName]").each(function(index){
				$(this).prop('checked',false);
			});
		}
		//统计数量和价格
		countAndPrice();
	};	
	//单选之后的全选按钮效果
	function check() {
		 var flag=0;
		 var count=$("input:checkbox[name=checkName]").length;
		 $("input:checkbox[name=checkName]").each(function(index){
			 //当前对象的属性是否被选中
			if ($(this).prop('checked')) {
				++flag;
			}
		}); 
		 if (flag==count) {
			 $("#selectAll").prop('checked',true);
		}else {
			 $("#selectAll").prop('checked',false);
		} 
		//统计数量和价格
		countAndPrice();
	};
	//统计选中的商品数量和价格countAndPrice()
	function countAndPrice() {
		var count=0;//数量
		var price=0;//价格
		$("input:checkbox[name=checkName]").each(function(index){
			if ($(this).prop('checked')) {
				//数量
				count+=parseInt($(this).parent().next().next().next().children("input[type=text]").val());
				//价格
				price+=parseFloat($(this).parent().next().next().next().next().attr("value"));
			}
		}); 
		$("#s_count").text(count);
		$("#s_sum").text(price+".00");
	}
	
	//进行商品跟新操作
	function update(id,count,price) {
		$.post("../Easy_Easy_City_First_End/shop",
				{"opr":"update","id":id,"count":count,"price":price},
			function(data){
				if (data.result=="1") {
					
				} else {
					
				}
			},"json");
	};
	//结算按钮
	function accounts(){
		var flag=false;		 
		//判断是否选中了商品和存放需要结算的商品编号
		var idArray=new Array();
		$("input:checkbox[name=checkName]").each(function(index){
			if ($(this).prop('checked')) {
				flag=true;
				//id
				idArray[index]=$(this).parent().prev().val();
			}else {
				idArray[index]=null;
			}
		}); 
		if (!flag) {
			alert("亲，还未选中需要结算的商品哦！");
			return;
		}
		 var idNum=null;
		 for (var int = 0; int < idArray.length; int++) {
			if (idArray[int]!=null&&idArray[int]!=undefined) {
				idNum+=","+idArray[int];
			}
		}
		//获取用户ID
		var user_id= $("#user_id").val();
		 //alert(id)
		 $.post("../Easy_Easy_City_First_End/detail",
					{"opr":"add","idNum":idNum},
				function(data){
					if (data.result=="1") {
						location.href="../Easy_Easy_City_First_End/detail?opr=list&id="+user_id;
					} else {
						alert("失败");
					}
				},"json");
	} 
</script>
</head>
<body class="index">
<input type="hidden" id="user_name" value="${sessionScope.login.loginName}"/>
 <input type="hidden" id="user_id" value="${sessionScope.login.id}"/>
<div class="top_ad"><div class="w1200"><a href="#" id="close"></a></div></div>

<div class="top">
	<div class="w1200">
		<div class="left">您好，欢迎光临易易城！<a href="#">[登录]</a> <a href="#">[注册]</a></div>
        <div class="right"><a href="#">我的会员中心</a>|<a href="#">收藏夹</a>|<a href="#">服务中心</a>|<a href="#">在线客服</a>|<a href="#">购物车<!-- <b>0</b>件 --></a></div>
        <div class="clear"></div>
    </div>
</div>

<div class="head">
	<div class="w1200">
    	<div class="logo"><a href="#"></a></div>
        <div class="search">
        	<form action="#" class="form">
        		<input type="text" value="输入商品关键字" name="keyword" class="txt" onfocus="if(value=='输入商品关键字') {value=''}" onblur="if(value=='') {value='输入商品关键字'}"/>
                <input type="submit" value="搜索" class="sub"/>
            </form>
        	<p><a href="#">iphone6s</a>|<a href="#">面膜</a>|<a href="#">婚庆床品</a>|<a href="#">运动鞋</a>|<a href="#">眼霜</a>|<a href="#">月饼</a>|<a href="#">智能手机</a>|<a href="#">连衣裙</a></p>
        </div>
        <div class="s_r">
        	<dl>
            	<dt><p>购物车<!-- <span>0</span> --></p></dt>
                <dd>客服电话：<b>400-0139-038</b></dd>
            </dl>
        </div>
        <div class="clear"></div>
    </div>
</div>

<div class="menu">
	<div class="w1200">
    	<div class="item" id="nav"><a href="#" class="nav">全部商品分类</a>
        	<div class="nav_son">
            	<ul>
                	<li class="li01"><a href="#">功能产品</a></li>
                    <li class="li02"><a href="#">服装箱包</a></li>
                    <li class="li03"><a href="#">美妆护肤</a></li>
                    <li class="li04"><a href="#">珠宝饰品</a></li>
                    <li class="li05"><a href="#">数码家电</a></li>
                    <li class="li06"><a href="#">食品茶酒</a></li>
                    <li class="li07"><a href="#">运动体育</a></li>
                    <li class="li08"><a href="#">家居家纺</a></li>
                    <li class="li09"><a href="#">生活服务</a></li>
                    <li class="li10"><a href="#">其他</a></li>
                </ul>
            </div>
        </div>
    	<div class="item"><a href="#" class="home">商城首页</a></div>
        <div class="item"><a href="#">易易特色</a></div>
        <div class="item"><a href="#">热销产品</a></div>
        <div class="item"><a href="#">新品上市</a></div>
        <div class="item"><a href="#">精品推荐</a></div>
        <div class="item"><a href="#">生活服务</a></div>
    </div>
</div>
<!-- 实现购物车清单的查询servlet -->
<c:choose>
		<c:when test='${empty sessionScope.shopCarsList}'>
			<jsp:forward page='shop?opr=list&userName=${login.loginName}'></jsp:forward>
		</c:when>
</c:choose>
<div class="w1200">
	<div class="position"><a href="#">首页</a> > <a href="#">购物车</a></div>
    
    <div class="shopcar">
    	<div class="shop_lc"><span class="sp01">我的购物车</span><span class="sp02">填写提交信息表单</span><span class="sp03">在线支付</span></div>
      	<dl>
        	<dt><span>我的购物车</span></dt>
            <dd>
            	<table width="100%" cellpadding="0" cellspacing="0" border="0">
                  <tr class="tr_t"><!-- onclick="selectAll()" -->
                    <td width="4%"><input id="selectAll" onclick="selectAll()" type="checkbox" checked="checked"/></td>
                    <td width="4%">全选</td>
                    <td width="35%">商品</td>
                    <td width="26%">单价</td>
                    <td width="6%">数量</td>
                    <td width="14%">小计</td>
                    <td width="11%">操作</td>
                  </tr>
                  <c:forEach var="shop" items="${sessionScope.shopCarsList}" varStatus="status">
                  <tr class="tr_c" id="tr_c${shop.id }">
                  <input id="s_id${shop.id }" type="hidden" value="${shop.id }"/>
                    <td><input id="c_id${shop.id }" value="${shop.id }" name="checkName" onclick="check()" type="checkbox" checked="checked"/></td>
                    <td colspan="2">
                    	<table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="15%"><img src="addPicture/${shop.picture}"/></td>
                            <td width="85%"><a href="#" class="title">${shop.description}</a></td>
                          </tr>
                        </table>
                    </td>
                    <td class="price" value="${shop.salePrice}">￥${shop.salePrice}</td>
                    <td><input onclick="jian(${shop.salePrice},${shop.id })" type="button" value="-" class="jian"/><input class="num_txt" id="num${shop.id }" type="text" value="${shop.count}"/><input onclick="jia(${shop.salePrice},${shop.id})" type="button" value="+" class="jian"/></td>
                    <td id="s_price${shop.id}" class="price" value="${shop.price}">￥${shop.price}</td>
                    <td><a href="#" onclick="del(${shop.id })">删除</a></td>
                  </tr>
                  </c:forEach>
                 <!--  <tr class="tr_c">
                    <td><input type="checkbox" checked="checked"/></td>
                    <td colspan="2">
                    	<table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="15%"><img src="images/ico23.jpg"/></td>
                            <td width="85%"><a href="#" class="title">头层牛皮真皮沙发 客厅家具 FPSF0814 进口中厚皮 双人位+单人位+贵妃位</a></td>
                          </tr>
                        </table>
                    </td>
                    <td class="price">￥3083.00</td>
                    <td><span class="jian">-</span><input type="text" value="1"/><span class="jia">+</span></td>
                    <td class="price">￥3083.00</td>
                    <td><a href="#">删除</a></td>
                  </tr> -->
                  <tr class="tr_d">
                    <td colspan="7">
                    	<table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="75%"><span class="del"><a href="#" onclick="delSelect()">删除选中商品</a></span></td>
                            <td width="11%">已选商品  <strong id="s_count">1</strong>  件</td>
                            <td width="14%" class="all_price">合计：<font>￥</font><font id="s_sum">3083.00</font></td>
                          </tr>
                        </table>
                    </td>
                  </tr>
                </table>
                <div class="clear"></div>
                
   		  </dd>
        </dl>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="go_tb">
         <tr>
           <td width="20%"><a href="index.jsp" class="go_buy">继续购物</a></td>
           <td width="63%">&nbsp;</td>
           <td width="17%" align="right"><a href="javascript:accounts();" class="code">结 算</a></td>
         </tr>
        </table>
        <div class="clear"></div>
    </div>
</div>

<!--footer-->
<div class="footer">
	<div class="f_bz">
    	<div class="w1200">
            <dl class="dl01">
                <dt>正品保证</dt>
                <dd>正品护航  购物无忧</dd>
            </dl>
            <dl class="dl02">
                <dt>你消费 我买单</dt>
                <dd>返现购物商城</dd>
            </dl>
            <dl class="dl03">
                <dt>品类丰富</dt>
                <dd>品类齐全 轻松购物</dd>
            </dl>
            <dl class="dl04">
                <dt>特色服务体验</dt>
                <dd>为您呈现不一样的服务</dd>
            </dl>
            <div class="clear"></div>
        </div>
    </div>
	<div class="f_nav">
    	<div class="w1200">
            <dl>
                <dt>新手指南</dt>
                <dd>
                    <a href="#">注册新用户</a>
                    <a href="#">商品订购流程</a>
                    <a href="#">会员注册协议</a>
                </dd>
            </dl>
            <dl>
                <dt>付款方式</dt>
                <dd>
                    <a href="#">支付宝支付</a>
                    <a href="#">网上银行支付</a>
                    <a href="#">货到付款</a>
                </dd>
            </dl>
            <dl>
                <dt>常见问题</dt>
                <dd>
                    <a href="#">订单状态</a>
                    <a href="#">发票说明</a>
                </dd>
            </dl>
            <dl>
                <dt>售后服务</dt>
                <dd>
                    <a href="#">退换货政策</a>
                    <a href="#">退换货流程</a>
                    <a href="#">退款说明</a>
                    <a href="#">退换货申请</a>
                </dd>
            </dl>
            <dl>
                <dt>客服中心</dt>
                <dd>
                    <a href="#">常见问题</a>
                    <a href="#">联系客服</a>
                    <a href="#">投诉与建议</a>
                </dd>
            </dl>
            <div class="ewm"><img src="images/home/ico35.png"/></div>
            <div class="ewm"><img src="images/home/ico38.png"/></div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="w1200">
        <div class="bottom">
            <a href="#">关于我们</a>|<a href="#">帮助中心</a>|<a href="#">法律声明</a>|<a href="#">用户协议</a>|<a href="#">联系我们</a>|<a href="#">人才招聘</a>|<a href="#">站点地图</a>
           
            <p>网络文化经营许可证：粤网文[2015]0295-065号<br />© 2015 深圳易易城科技网络有限公司. 粤ICP备15042543号</p>
            <p class="p02"><img src="images/home/ico25.jpg"/><img src="images/home/ico26.jpg"/><img src="images/home/ico27.jpg"/><img src="images/home/ico36.jpg"/><img src="images/home/ico37.jpg"/></p>
        </div>
    </div>
</div>
<!--float_right-->
<div class="float">
	<ul>
    	<li><a href="#" class="a01"></a></li>
        <li><a href="#" class="a02"></a></li>
        <li><a href="#" class="a03"></a></li>
        <li><a href="#" class="a04"></a></li>
    </ul>
</div>


</body>
</html>
